<template>
  <div class="form-item">
    <div class="icon-left">
      <u-icon size="100" :name="icon"></u-icon>
    </div>
    <div class="input-right">
      <span>{{ title }}</span>

      <u-input
        :value="value"
        @input="observerInput"
        type="text"
        :border="false"
        :custom-style="customStyle"
        height="50"
        :clearable="false"
        :placeholder="placeholder"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "title",
    },
    icon: {
      type: String,
      default: "",
    },
    placeholder:{
      type: String,
      default: "请输入内容",
    },
    value: "",
  },
  data() {
    return {
      customStyle: {
        backgroundColor: "rgb(239,239,239)",
      },
    };
  },
  model: {
    prop: "value",
    event: "input",
  },
  methods: {
    observerInput(el) {
      this.$emit("input", el);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-item {
  width: 100%;
  padding: 20rpx 0;
  margin-top: 20rpx;
  background-color: white;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  & .icon-left {
    margin: 0 20rpx;
  }

  & .input-right {
    width: 100%;
    padding-right: 50rpx;

    & > span {
      font-size: 32rpx;
    }
  }
}
</style>
